<template>
  <div class="service-hall">
    <crumbs :bread="bread">
      <template #content>
        <div class="service-type">
          <span class="s-title">服务类别：</span>
          <div class="type-item-div">
            <span v-for="(item, idx) in serviceType" :key="idx" class="type-item" :class="{ active: currentKey === item.dictValue }" @click="changeType(item)">{{ item.dictLabel }}</span>
          </div>
        </div>

        <div class="services">
          <div class="service-block" v-for="(item, idx) in services" :key="idx">
            <div class="t-title">{{ item.name }}</div>
            <div class="t-list">
              <a href="javascript:;" class="item" v-for="(value, key) in item.serviceLinks" :key="key" @click="goto(value)">
                <div class="left">
                  <img :src="value.picture ? value.picture : require('@/views/Home/components/cService/images/bg-1.png')" alt="" />
                </div>
                <div class="right">
                  <div class="title">{{ value.name }}</div>
                  <div class="desc" v-if="value.remark" :title="value.remark">{{ value.remark }}</div>
                </div>
                <div class="soucang">
                  <div class="iconfont iconshoucang"></div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </template>

      <template #contentTopRight>
        <div class="search">
          <div class="search-input">
            <a-input-search placeholder="请输入搜索内容" enter-button="搜索" v-model="searchVal" @search="searchServiceRoom" allow-clear />
          </div>
          <a-button class="c-clear" @click="initiSearchVal()">清除</a-button>
          <span class="c-us" @click="contactVisible = true">联系我们</span>
        </div>
      </template>
    </crumbs>

    <a-modal v-model="contactVisible" ok-text="确认" cancel-text="取消" :closable="false" :width="600" class="contact">
      <template #footer>
        <a-button type="primary" @click="contactVisible = false">确定</a-button>
      </template>
      <div class="contact-body">
        <div class="row header">
          <div class="col-1">部门</div>
          <div class="col-2">姓名</div>
          <div class="col-3">办公电话</div>
          <div class="col-4">qq</div>
        </div>
        <div class="list">
          <div class="row row-tr" v-for="(item, idx) in contacts" :key="idx">
            <div class="left col-1 no-bottom">{{ item.name }}</div>
            <div class="right">
              <div v-for="(value, key) in item.users" :key="key">
                <div class="col-2">{{ value.name }}</div>
                <div class="col-3">{{ value.phone }}</div>
                <div class="col-4">{{ value.qq }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import Crumbs from "@/components/Crumbs/index.vue";
import { Input, Button, Modal } from "ant-design-vue";
import CList from "@/components/CList/index.vue";
import env from "@/config/env";

@Component({
  name: "ServiceHall",
  components: {
    CList,
    Crumbs,
    AInputSearch: Input.Search,
    AButton: Button,
    AModal: Modal
  }
})
export default class Notice extends Base {
  private contactVisible = false;
  private serviceType: any[] = [{ dictValue: "", dictLabel: "全部" }];
  private currentKey = "";
  private searchVal = "";
  private services: any[] = [];
  private contacts: any[] = [];

  private created() {
    this._created();
    this.getSystemDict();
    this.searchServiceRoom();
    this.serviceGetContactOur();
  }

  private changeType(obj: any) {
    this.currentKey = obj.dictValue;
    this.searchServiceRoom();
  }

  private async getSystemDict() {
    const res = await this.$api.SystemDict("service_type");
    if (res && res.code === 200) {
      this.serviceType = [...this.serviceType, ...res.data];
    }
  }

  private async initiSearchVal() {
    this.searchVal = "";
    this.searchServiceRoom();
  }

  private async searchServiceRoom() {
    const res = await this.$api.SearchServiceRoom({
      name: this.searchVal,
      serviceType: this.currentKey
    });

    if (res && res.code === 200) {
      this.services = res.data;
    }
  }

  private async serviceGetContactOur() {
    const res = await this.$api.ServiceGetContactOur();

    // 重组contacts
    if (res && res.code === 200) {
      if (res.data && res.data.length) {
        let temp = null;
        for (const item of res.data) {
          temp = this.contacts.find((o: any) => o.name === item.deptName);
          if (!temp) {
            temp = { name: item.deptName, users: [] };
            this.contacts.push(temp);
          }
          temp.users.push(item);
        }
      }
    }
  }

  private async goto(obj: any) {
    switch (obj.type) {
      case "common_link":
        this.$tools.cOpen({ url: obj.link });
        break;
      case "download_link":
        debugger
        console.log(obj.link);
        if(obj.link.indexOf(".pdf")>0){
          window.open(obj.link);
        }else{
          this.$tools.cOpen({ url: obj.link, download: true });
        }
        break;
      case "bpm_workflow_link":
        this.$tools.cOpen({ url: `${env.bpmHost}/Portal/run.html?workflowCode=${obj.link}&formId=&date=&code=${this.currentUser.userNo}` });
        break;
      case "hr_workflow_link":
      case "oa_workflow_link":
      case "ec_link":
        this.$api.GetServiceRoomLink({ type: obj.type, link: obj.link }).then((res: any) => {
          if (res && res.data && Object.keys(res.data)) {
            this._goto(res.data.URL, res.data.openWay);
          }
        });
        break;
      case "preview_link":
        if(obj.link.indexOf(".pdf")>0){
          window.open(obj.link);
        }else{
          window.open(this.$tools.filePreview(obj.link.substr(obj.link.lastIndexOf('/') + 1), obj.link));
        }
        break;
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.service-hall {
  .service-type {
    display: flex;
    align-items: center;
    font-size: 15px;
    flex-wrap: wrap;
    .scale(padding-top, 12);
    .s-title {
      flex-shrink: 1;
    }
    .type-item-div {
      flex: 1;
    }
    .type-item {
      border-radius: 4px;
      cursor: pointer;
      .scale(padding-top, 8);
      .scale(padding-bottom, 8);
      .scale(padding-left, 14);
      .scale(padding-right, 14);
      .scale(margin-right, 12);
      display: inline-block;

      &:hover,
      &.active {
        background-color: #50a1ed;
        color: white;
      }
    }
  }
  .search {
    display: flex;
  }
  .search-input {
    .scale(width, 360);
  }

  .c-us {
    border: 1px solid #d9d9d9;
    color: #666666;
    padding: 0 8px;
    border-radius: 4px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      color: #50a1ed;
      border-color: #50a1ed;
    }
  }

  .c-clear {
    margin: 0px 10px;
  }

  .services {
    padding-bottom: 32px;
  }

  .t-title {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin-bottom: 16px;
  }
  .t-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .left {
      flex-shrink: 1;
      .scale(width, 48);
      .scale(height, 48);
      margin-right: 8px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
    }
    .item {
      overflow: hidden;
      position: relative;
      height: 116px;
      margin-bottom: 16px;
      margin-right: 15px;
      display: flex;
      cursor: pointer;
      width: 23%;
      border-radius: 4px;
      background-color: #f7f9fc;
      padding: 16px;
      align-items: center;
      .title {
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
      }
      .desc {
        height: 42px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .soucang {
        position: absolute;
        width: 50px;
        height: 50px;
        right: -25px;
        top: -25px;
        transform: rotate(45deg);
        background-color: rgba(#ffffff, 0.5);
        box-shadow: 0 0 10px rgba(#000, 0.1);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 2px;
        display: none; // 暂时隐藏

        &.active,
        &:hover {
          .iconshoucang {
            color: #ffa940;
          }
        }
      }
      &:hover {
        color: #464b55;
        box-shadow: 0 0 10px rgba(#000000, 0.1);
      }
    }
    .iconshoucang {
      transform: rotate(-45deg);
      text-align: center;
      line-height: 100%;
      bottom: 0px;
      color: #cccccc;
    }
  }
  .v-hide {
    visibility: hidden;
  }
  .service-block {
    margin-top: 24px;
  }
}

.contact {
  .contact-body {
    .list {
      max-height: 500px;
      overflow: auto;
    }
    .header {
      background-color: #f5f5f5;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom: 0 !important;
    }
    .row {
      display: flex;
      align-items: center;
      text-align: center;
      line-height: 150%;
      border-bottom: 1px dashed #ddd;
      &:last-child {
        border-bottom: 0;
      }
    }
    .right > div {
      display: flex;
      border-bottom: 1px dashed #ddd;
      &:last-child {
        border-bottom: 0;
      }
    }
    .col-1,
    .col-2,
    .col-3,
    .col-4 {
      padding: 8px 0px;
      // border-bottom: 1px dashed #ddd;
    }
    .no-bottom {
      border-bottom: 0;
    }
    .col-1 {
      width: 160px;
    }
    .col-2 {
      width: 90px;
    }
    .col-3 {
      width: 170px;
    }
    .col-4 {
      width: 130px;
    }
  }
  /deep/.ant-modal-footer {
    border-bottom: 0;
  }
  /deep/.ant-modal-close-x {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  /deep/.ant-modal-body {
    padding: 8px;
    table {
      text-align: center;
    }

    tr {
      border-bottom: 1px dashed #ddd;
      &:last-child {
        border-bottom: 0;
      }
      &.item:hover {
        background-color: #f6f6fa;
      }
    }

    td,
    th {
      padding: 8px 0px;
    }
  }
}
</style>
